@import './base.css';

/* 设置 #app 的宽度、字体和渐变背景 */
@keyframes gradient-animation {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}

#app {
  max-width: 3000px;
  margin: 0 auto;
  min-height: 100vh;
  background:
    linear-gradient(145deg, #ffffff, #cdd2dc),
    /* 白色到灰色渐变 */
      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="5" fill="%23ccc" opacity="0.3"/></svg>'); /* 点状纹理 */
  background-size: 70px 70px; /* 控制纹理的大小 */
  background-blend-mode: overlay;
  animation: gradient-animation 150s ease infinite; /* 动画效果 */
}
a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

/* 鼠标悬浮效果 */
@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}
